<template>
	<view>
		<!-- 数据展示 -->
		<view class="content">
			<!-- 库存统计 -->
			<view class="grid-box total-weight">
				<view class="u-p-b-20"><text class="iconfont icon-tongji3 u-m-r-10"></text><text class="total-title">库存统计</text></view>
				<view class="u-flex">
					<view class="cell c1 u-flex-1">
						<view class="number"><text class="u-font-40">{{formatNumberWithTenThousand(form.amount)}}</text></view>
						<view class="title u-font-24">出库估值(元)</view>
					</view>
					<view class="divider"></view>
					<view class="cell c2 u-flex-1">
						<view class="number"><text class="u-font-40">{{formatNumberWithTenThousand(form.weight)}}</text></view>
						<view class="title u-font-24">出库重量(KG)</view>
					</view>
					<view class="divider"></view>
					<view class="cell c3 u-flex-1">
						<view class="number"><text class="u-font-40">{{formatNumberWithTenThousand(form.quantity)}}</text></view>
						<view class="title u-font-24">出库件数(件)</view>
					</view>
				</view>
				<!-- 按计算单位统计 -->
				<view class="u-tabs-box u-border-bottom">
					<u-tabs-swiper activeColor="#10beca" ref="tabs"
						:list="typelist" :current="current" @change="(index)=>{current = index;}" :is-scroll="false" swiperWidth="750">
					</u-tabs-swiper>
				</view>
				<view class="item" v-if="current == 0">
					<!-- <view><text class="u-tips-color">按重量回收统计：</text></view> -->
					<view class="progress-box" :class="on1?'on':''">
						<view class="progress-item" v-for="(item,index) in storeDetailsKG" :key="index">
							<view class="u-flex" style="line-height: 1em;">
								<view class="u-flex-1 name">{{item.title}}</view>
								<view class="number"><text class="u-font-32">{{item.weight}}</text><text class="u-font-24">KG</text></view>
							</view>
							<view class="u-flex u-p-b-10">
								<view class="u-flex-1">
									<u-line-progress :striped="true" :percent="percent(item.weight,form.weight)" :striped-active="true" :show-percent="false" :height="20" active-color="#10beca"></u-line-progress>
									<!-- <u-line-progress :striped="true" :percent="item.weightratio*100" :striped-active="true" :show-percent="false" :height="20" active-color="#10beca"></u-line-progress> -->
								</view>
							</view>
							<view class="u-flex" style="line-height: 1em;">
								<!-- <text class="u-tips-color u-font-24 u-flex-1">均价：<text class="u-font-bold">{{item.price}}</text>元/{{item.isweighing?'KG':'件'}}</text> -->
								<text class="u-tips-color u-font-24 ">回收总量占比<text class="u-font-bold">{{percent(item.weight,form.weight)}}</text>%</text>
							</view>
						</view>
						<view class="more u-text-center u-tips-color u-p-t-30" v-if="storeDetailsKG.length > 5 && on1 == false" @click="on1 = true">
							<text class="u-p-r-10">查看更多(共{{storeDetailsKG.length}}条)</text>
							<u-icon name="arrow-down" size="20"></u-icon>
						</view>
					</view>
				</view>
				<view class="item u-m-t-30" v-if="current == 1">
					<!-- <view><text class="u-tips-color">按件数回收统计：</text></view> -->
					<view class="progress-box" :class="on2?'on':''">
						<view class="progress-item" v-for="(item,index) in storeDetailsNum" :key="index">
							<view class="u-flex" style="line-height: 1em;">
								<view class="u-flex-1 name">{{item.title}}</view>
								<view class="number"><text class="u-font-32">{{item.quantity}}</text><text class="u-font-24">件</text></view>
							</view>
							<view class="u-flex u-p-b-10">
								<view class="u-flex-1">
									<u-line-progress :striped="true" :percent="percent(item.quantity,form.quantity)" :striped-active="true" :show-percent="false" :height="20" active-color="#10beca"></u-line-progress>
								</view>
							</view>
							<view class="u-flex" style="line-height: 1em;">
								<text class="u-tips-color u-font-24 u-flex-1">均价：<text class="u-font-bold">{{item.price}}</text>元/{{item.isweighing?'KG':'件'}}</text>
								<text class="u-tips-color u-font-24 ">回收总量占比<text class="u-font-bold">{{percent(item.quantity,form.quantity)}}</text>%</text>
							</view>
						</view>
						<view class="more u-text-center u-tips-color u-p-t-30" v-if="storeDetailsNum.length > 5 && on2 == false" @click="on2 = true">
							<text class="u-p-r-10">查看更多(共{{storeDetailsNum.length}}条)</text>
							<u-icon name="arrow-down" size="20"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			params:{
				type: Object,
				default:()=>{
					return {
						endDate:"",
						startDate:"",
						timeType:3,
						storeId:0
					}
				}
			}
		},
		data() {
			return {
				on1: false,
				on2: false,
				on3: false,
				typelist: [
					{
						value: 0,
						name: '按重量统计'
					},
					{
						value: 1,
						name: '按件数统计'
					}
				],
				current: 0,
				// 表单数据
				form:{
					"amount": 0,
					"quantity": 0,
					"weight": 0,
					"estimatedweight": 0,
					"details": [
						// {
						// 	"title": "",
						// 	"isweighing": true,
						// 	"amount": 0,
						// 	"quantity": 0,
						// 	"weight": 0,
						// 	"estimatedweight": 0,
						// 	"quantityratio": 0,
						// 	"weightratio": 0,
						// 	"estimatedweightratio": 0,
						// 	"amountratio": 0
						// }
					]
				}
			};
		},
		mounted() {
			this.getOperatingData()
		},
		computed:{
			storeDetailsKG(){
				return this.form.details.filter((item)=>item.isweighing == true).sort((a,b) => b.weight - a.weight)
			},
			storeDetailsNum(){
				return this.form.details.filter((item)=>item.isweighing == false).sort((a,b) => b.quantity - a.quantity)
			},
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			getOperatingData(){ //获取总览数据
				this.$u.post('/Statistics/Store/Stock',this.params).then((res)=>{
					this.form = res
				})
			},
			formatNumberWithTenThousand(num) {
				console.log(num)
				if(num == null){
					return '--'
				}
			    // 检查数字是否有效
			    if (isNaN(num)) {
			        return '--';
			    }
			
			    // 如果数字小于10000，则直接返回原数字
			    if (num < 10000) {
			        return num.toString();
			    }
			
			    // 计算数值并保留一位小数
			    const value = num / 10000;
			    const formattedValue = value.toFixed(2);
			
			    // 返回格式化的字符串
			    return `${formattedValue}万`;
			},
			percent(weight,count) {
				let total = count
				if (total > 0) {
					return Number((weight / total * 100).toFixed(2))
				} else {
					return 0
				}
			},
			timeConfirm(e) {
				// 选择时间类型
				this.timeType = e.detail.value
				if (this.timeType == 9) {
					this.customTime = true
				} else {
					this.getOperatingData()
				}
			},
			calendarChange(e) {
				// 选择自定义时间范围
				console.log(e);
				this.startDate = e.startDate
				this.endDate = e.endDate
				this.getOperatingData()
			},
			percent(weight,count) {
				let total = count
				if (total > 0) {
					return Number((weight / total * 100).toFixed(2))
				} else {
					return 0
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 筛选
	.filter-bar {
		display: flex;
		color: #fff;
		// padding: 0 30rpx;
	
		// justify-content: space-between;
		.item {
			background-color: rgba(241, 241, 241, 0.32);
			padding: 8rpx 32rpx;
			border-radius: 28rpx;
			// margin-right: 10rpx;
		}
	}
	// 宫格展示
	.grid-box {
		background-color: #fff;
		margin: 0 30rpx;
		padding: 30rpx;
		border-radius: 12rpx;
		margin-top: 30rpx;
		
		.total-title{
			font-size: 32rpx;
		}
		
		.title {
			font-size: 28rpx;
			color: $u-tips-color;
		}
	
		.number {
			margin-top: 10rpx;
		}
	}
	// 条形进度条显示
	.progress-box{
		.progress-item:nth-child(1),.progress-item:nth-child(2),.progress-item:nth-child(3),.progress-item:nth-child(4),.progress-item:nth-child(5){
			height: initial!important;
			border-bottom: 1px dashed #f1f1f1!important;
			padding-bottom: 20rpx!important;
			padding-top: 20rpx!important;
		}
		&.on{
			>.progress-item{
				height: initial!important;
				border-bottom: 1px dashed #f1f1f1!important;
				padding-bottom: 20rpx!important;
				padding-top: 20rpx!important;
			}
		}
		
		.progress-item {
			border-bottom: 1px dashed #f1f1f1;
			padding-bottom: 20rpx;
			padding-top: 20rpx;
			transition: all 0.3s;
			height: 0;
			overflow: hidden;
			padding: 0;
			border: 0;
			
			.name {
				font-size: 32rpx;
			}

			.number{
				font-weight: inherit!important;
			}
		}
	}
	.content{
		position: relative;
		padding-bottom: 30rpx;
		.item{
			.item-t{
				margin-bottom: 10rpx;
			}
			.title{
				font-size: 28rpx;
			}
			.unit{
				font-size: 32rpx;
				color: #000;
			}
			.number{
				font-size: 42rpx;
				font-weight: bold;
				color: #000;
			}
		}
		.lower-level{
			display: flex;
			margin-top: 30rpx;
			.cell {
				padding: 10px 0;
				border-radius: 12rpx;
				display: flex;
				flex-direction: column;
				text-align: center;
				background-color: $u-bg-color;
				flex: 1;
				.cell-t{
					margin-bottom: 10rpx;
				}
			}
			
			.divider {
				height: 80rpx;
				background-color: #fff;
				margin: 0 10rpx;
			}
		}
	}
	.dashed-line{
		position: relative;
		left: -30rpx;
		width: 690rpx;
		border-bottom: 1px dashed #e4e7ed;
		&:after{
			content: '';
			width: 28rpx;
			height: 28rpx;
			border-radius: 28rpx;
			background-color: #f7f7f7;
			display: block;
			position: absolute;
			top: -14rpx;
			left: -14rpx;
			
		}
		&:before{
			content: '';
			width: 28rpx;
			height: 28rpx;
			border-radius: 28rpx;
			background-color: #f7f7f7;
			display: block;
			position: absolute;
			top: -14rpx;
			right: -14rpx;
		}
	}
	.total-weight {
		position: relative;

		.cell {
			padding: 10px 0;
			border-radius: 12rpx;
			display: flex;
			flex-direction: column;
			text-align: center;
			&.c1{
				background: #e83e8c14;
			}
			&.c2{
				background: #28a74517;
			}
			&.c3{
				background: #007bff17;
			}
			&.c4{
				background: #ff990038;
			}
		}

		.number {
			margin-top: 0;
			margin-bottom: 10rpx;
		}

		.divider {
			// width: 1rpx;
			height: 80rpx;
			background-color: #f1f1f1;
			margin: 0 10rpx;
		}
	}
	.small-type{
		padding-top: 30rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		.item{
			background-color: $u-bg-color;
			border-radius: 16rpx;
			width: 307rpx;
			font-size: 24rpx;
			padding: 20rpx;
			line-height: 1.6em;
			// box-shadow: 2px 2px 5px #e7e7e7;
			.name{
				font-size: 32rpx;
				padding-bottom: 20rpx;
			}
		}
	}
</style>
